<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> tab的切换 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        ul {
            list-style: none;
        }


        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }


        .hd {
            height: 45px;
        }


        .hd span {
            display: inline-block;
            /*将行内元素转换成行内块元素，宽高才起作用*/
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }


        .hd span.current {
            /*交集选择器，标签指定式选择器*/
            background-color: purple;
            /*紫色*/
        }


        .bd li {
            height: 255px;
            background-color: purple;
            display: none;
            /*设置隐藏*/
        }


        .bd li.current {
            display: block;
            /*显示*/
        }
    </style>

</head>

<body>
    <div class="box" id="box">
        <div class="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd">
            <ul id="list">
                <li class="current">我是体育模块</li>
                <li>我的娱乐模块</li>
                <li id="li3">我是新闻模块</li>
                <li>我是综合模块</li>
            </ul>
        </div>
    </div>
    <script>
        // 面向对象方法实现Tab栏切换


        // 1. 定义类
        // 1.1 定义类结构：class + 类名 + {}
        class Tabchange {
            // 1.2 有没有要初始化条件的：constructor：获取各种数据（元素：box，span和li）
            constructor(idname, classname) {
                //idname = 要实施的最高盒子  classname = 要进行改变的样式名称
                //获取相关元素
                this.box = document.getElementById(idname);
                this.spans = this.box.querySelectorAll('span');
                this.lis = this.box.querySelectorAll('li');
                //将类名存储在属性转中
                this.classname = classname;
                // console.log(this);
                this.tabClick();
            }
            // 1.3 给span绑定点击事件：制作一个新的方法 tabClick()，完成给span绑定点击事件
            tabClick() {
                this.spans.forEach((span, index) => {
                    //遍历进行span的点击事件
                    // console.log(1);
                    span.onclick = () => {
                        // console.log(2);
                        //进行排他; 利用遍历,先统一
                        this.spans.forEach(item => {
                            item.classList.remove(this.classname);
                        });
                        //后特殊
                        span.classList.add(this.classname);

                        this.lis.forEach(li => {
                            //进行排他; 利用遍历,先统一
                            li.classList.remove(this.classname);
                            // console.log(1);
                        })
                        //后特殊
                        this.lis[index].classList.add(this.classname);
                        console.log(2);
                    };
                })
            }
        }
        // 2. 调用类
        let a = new Tabchange('box', 'current');
        // console.log(a);

        /*
        要清楚整个效果的结构顺序,清楚他们相互的关系
        那些效果是在点击效果内,解决了就比较容易解决问题
        */

    </script>
</body>

</html>